<template>
  <div class="reportresult">
    <van-nav-bar fixed :title="reporttitle" left-text="返回" left-arrow @click-left="backToList" />
    <div style="margin-top:8vh;" v-if="sumdata !== null || sumdata !== undefined || sumdata.length > 0">
      <span style="padding:3px;color:#323233;font-size:14px;line-height:24px;" v-for="data in sumdata" :key="data.value">{{ data.value }}</span>
    </div>
    <van-list v-model="loading" :finished="finished" finished-text="已加载全部数据" @load="onLoad" style="margin-bottom:8vh;">
      <div v-for="item in list" clickable :key="item.title" style="padding:10px 16px;border-bottom:1px solid #ebedf0;">
        <div v-for="itemvalue in item.value" :key="itemvalue.index" style="color:#323233;font-size:14px;line-height:24px;">
          {{ itemvalue }}
        </div>
      </div>
    </van-list>
    <van-popup v-model="conditionshow" closeable close-icon-position="top-right" position="bottom">
      <div style="margin-top:5vh;">
        <form>
          <div v-for="condition in conditiondata" :key="condition.field">
            <template v-if="condition.uitype === 'ref'">
              <input type="hidden" v-model="condition.value" />
              <van-field v-model="condition.value2" :label="condition.title" right-icon="search" @click-right-icon="openRef(condition)" />
            </template>
            <template v-else-if="condition.uitype === 'string' && condition.filtertype === 'yearmonth'">
              <van-field disabled v-model="condition.value" :label="condition.title" @click="openYearMonth(condition)" />
            </template>
            <template v-else-if="condition.uitype === 'datetime' && condition.filtertype === 'yearmonth'">
              <van-field disabled v-model="condition.value" :label="condition.title" @click="openYearMonth(condition)" />
            </template>
            <template v-else-if="condition.uitype === 'datetime'">
              <van-field v-model="condition.value" :label="condition.title" @click="openYearMonthDay(condition)" />
            </template>
            <template v-else>
              <van-field clearable v-model="condition.value" :label="condition.title" />
            </template>
          </div>
          <!-- 不能使用van-button -->
          <div style="text-align:right;">
            <input type="button" style="margin:5px;" class="van-button van-button--info van-button--small" value="查询" @click="query()" />
            <input type="button" style="margin:5px;" class="van-button van-button--default van-button--small" value="清空" @click="clearquery()" />
          </div>
        </form>
      </div>
    </van-popup>
    <van-popup v-model="yearmonthshow" round position="bottom">
      <van-datetime-picker v-model="currentYearMonth" type="year-month" @confirm="selectedYearMonth" />
    </van-popup>
    <van-popup v-model="yearmonthdayshow" round position="bottom">
      <van-datetime-picker v-model="currentYearMonthDay" type="date" @confirm="selectedYearMonthDay" />
    </van-popup>
    <van-tabbar v-model="active" safe-area-inset-bottom>
      <van-tabbar-item @click="query()">查询</van-tabbar-item>
      <van-tabbar-item @click="openCondition()">过滤</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Vue from 'vue'
import { Search, List, Cell, PullRefresh, Toast, Tabbar, TabbarItem, Popup, Dialog, Checkbox, CheckboxGroup, Panel, NavBar, DatetimePicker } from 'vant'
import qs from 'qs'
Vue.use(Search).use(List).use(Cell).use(PullRefresh).use(Toast).use(Tabbar).use(TabbarItem).use(Popup).use(Dialog).use(Checkbox).use(CheckboxGroup).use(Panel).use(NavBar).use(DatetimePicker)
export default {
  name: 'reportresult',
  data () {
    return {
      reportid: this.$route.query.reportid,
      reportviewid: this.$route.query.reportviewid,
      reporttitle: this.$route.query.reporttitle,
      list: [],
      sumdata: [],
      loading: false,
      finished: false,
      isLoading: false,
      active: 0,
      isquery: 0,
      intpage: 1,
      conditiondata: [],
      conditionshow: false,
      clickmodel: {},
      yearmonthshow: false,
      yearmonthdayshow: false,
      currentYearMonth: new Date(),
      currentYearMonthDay: new Date()
    }
  },
  methods: {
    onLoad () {
      let data = {
        view: this.isquery,
        reportid: this.reportid,
        reportviewid: this.reportviewid,
        intpage: this.intpage
      }
      for (let i = 0; i < this.conditiondata.length; i++) {
        data[i + '_report_fieldid'] = this.conditiondata[i].fieldid
        data[i + '_report_operate'] = this.conditiondata[i].operate
        data[i + '_report_joinobject'] = this.conditiondata[i].idjoinobject
        data[i + '_report_field'] = this.conditiondata[i].fieldref
        data[i + '_report_value'] = this.conditiondata[i].value
        data[i + '_report_value_ref'] = this.conditiondata[i].value2
      }
      this.axios({
        method: 'post',
        url: '/api/report.result.do',
        data: qs.stringify(data)
      }).then(res => {
        //console.log(res)
        if (res.data.flag === '1') {
          Toast(res.data.des)
          if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
            this.loginout()
          }
        } else {
          let headdata = res.data.jsondata.headdata
          let bodydata = res.data.jsondata.bodydata
          this.sumdata = res.data.jsondata.sumdata
          for (let i = 0; i < bodydata.length; i++) {
            let rsdata = []
            for (let j = 0; j < bodydata[i].length; j++) {
              if (bodydata[i][0].value === '合计') {
                if (bodydata[i][j].uiType === 'double') {
                  rsdata.push(headdata[j].value + ':' + bodydata[i][j].value)
                } else if (bodydata[i][j].uiType === 'percent') {
                  let bg = bodydata[i][j].value
                  bg = Number(bg * 100).toFixed(2)
                  bg += '%'
                  rsdata.push(headdata[j].value + ':' + bg)
                } else {
                  rsdata.push(bodydata[i][j].value)
                }
              } else {
                if (bodydata[i][j].uiType === 'percent') {
                  let bg = bodydata[i][j].value
                  bg = Number(bg * 100).toFixed(2)
                  bg += '%'
                  rsdata.push(headdata[j].value + ':' + bg)
                } else {
                  rsdata.push(headdata[j].value + ':' + bodydata[i][j].value)
                }
              }
            }
            this.list.push({ value: rsdata })
          }
          if (bodydata == null || bodydata.length === 0 || this.intpage > res.data.jsondata.intallpage) {
            this.loading = false
            this.finished = true
          } else {
            this.intpage++
            this.loading = false
          }
        }
      }).catch(res => {
        this.reserror(res)
      })
    },
    backToList () {
      this.$router.push({ name: 'reportlist', query: { idobject: 'report' } })
    },
    query () {
      this.isquery = 1
      this.intpage = 1
      this.list = []
      this.finished = false
      this.loading = true
      this.conditionshow = false
      this.onLoad()
    },
    openCondition () {
      if (this.conditiondata.length === 0) {
        let data = {
          idreport: this.reportid
        }
        this.axios({
          method: 'post',
          url: '/api/report.condition.do',
          data: qs.stringify(data)
        }).then(res => {
          if (res.data.flag === '1') {
            Toast(res.data.des)
            if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
              this.loginout()
            }
          } else {
            //console.log(res)
            this.conditiondata = res.data.jsondata
            this.conditionshow = true
          }
        }).catch(res => {
          this.reserror(res)
        })
      } else {
        this.conditionshow = true
      }
    },
    clearquery () {
      for (let i = 0; i < this.conditiondata.length; i++) {
        this.conditiondata[i].value = ''
        this.conditiondata[i].value2 = ''
      }
    },
    openRef (condition) {
      this.clickmodel = condition
      this.$router.push({
        name: 'ref',
        params: {
          bo: condition.idjoinobject,
          tobo: 'report',
          field: condition.field,
          fieldref: condition.fieldref,
          conditionVal: condition.value2,
          conditionValHidden: 'sname:in:',
          viewid: condition.idfieldref
        }
      })
    },
    openYearMonth (condition) {
      this.conditionshow = false
      if (condition.value != null && condition.value !== undefined && condition.value !== '') {
        condition.value = condition.value.substring(0, 7)
        this.currentYearMonth = new Date(condition.value)
      }
      this.clickmodel = condition
      this.yearmonthshow = true
    },
    openYearMonthDay (condition) {
      this.conditionshow = false
      if (condition.value != null && condition.value !== undefined && condition.value !== '') {
        condition.value = condition.value.substring(0, 10)
        this.currentYearMonthDay = new Date(condition.value)
      }
      this.clickmodel = condition
      this.yearmonthdayshow = true
    },
    selectedYearMonth () {
      //console.log(this.currentYearMonth)
      let year = this.currentYearMonth.getFullYear()
      let month = this.currentYearMonth.getMonth() + 1
      if (month < 10) {
        month = '0' + month
      }
      let datestring = year + '-' + month
      this.clickmodel.value = datestring
      this.yearmonthshow = false
      this.conditionshow = true
    },
    selectedYearMonthDay () {
      //console.log(this.currentYearMonthDay)
      let year = this.currentYearMonthDay.getFullYear()
      let month = this.currentYearMonthDay.getMonth() + 1
      let day = this.currentYearMonthDay.getDate()
      if (month < 10) {
        month = '0' + month
      }
      if (day < 10) {
        day = '0' + day
      }
      let datestring = year + '-' + month + '-' + day
      this.clickmodel.value = datestring
      this.yearmonthdayshow = false
      this.conditionshow = true
    }
  },
  activated () {
    if (this.$store.state.ref_show !== '') {
      this.conditionshow = true
      this.clickmodel.value2 = this.$store.state.ref_show
      this.clickmodel.value = this.$store.state.ref_id
      this.clickmodel = {}
      this.$store.commit('clearRef')
    }
  }
}
</script>
